<template>
  <div class="container">
    <!-- <div class="headCard">
      <el-card class="box-card">
        <el-row :gutter="12">
          <el-col :span="4">
            <el-card shadow="always">
              {{ countAllStudents1 }}
              <p>全校在校生人数</p>
            </el-card>
          </el-col>
          <el-col v-for="(item,index) in numOfStudents" :key="index" :span="4">
            <el-card shadow="always">
              {{ item }}
              <p v-if="index===0">{{grade[index]}}级在校生人数</p>
              <p v-if="index===1">{{grade[index]}}级在校生人数</p>
              <p v-if="index===2">{{grade[index]}}级在校生人数</p>
              <p v-if="index===3">{{grade[index]}}级在校生人数</p>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div> -->
    <!-- 搜索 -->
    <div class="btnSearch">
      <el-form :inline="true" label-position="top" class="demo-form-inline">
        <el-form-item label="学生姓名">
          <el-input
            v-model="studentName"
            placeholder="请输入学生姓名"
            style="width: 200px"
            clearable
          />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input
            v-model="idCard"
            placeholder="请输入身份证号"
            style="width: 200px"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="optionBtns"
            icon="el-icon-search"
            @click="selectDataBySelect"
            >搜索</el-button
          >
          <!-- <el-button type="primary" class="optionBtns" @click="onload">导入溯源表<i class="el-icon-upload el-icon--right" /></el-button> -->
          <!-- <el-button type="warning" class="optionBtns" icon="el-icon-star-off"  @click="dataBackup">备份</el-button> -->
          <!-- <el-button type="warning" class="optionBtns" icon="el-icon-star-off"  @click="dataBackupList">备份记录</el-button> -->
          <!-- <el-button type="text" @click="exportData">导出</el-button> -->
          <!-- <el-button type="text" @click="exportDataList">导出记录</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="tableLis">
      <el-table
        :data="tableFiledName"
        size="small"
        row-class-name="row"
        cell-class-name="column"
        :row-style="setRowStyle"
        :cell-style="setColumnStyle"
        :highlight-current-row="true"
        fit
        @cell-click="cellClick"
        v-loading="isLoading"
        element-loading-text="数据正在加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          prop="student_basic_info_student_worker__name"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          prop="student_basic_info_student_worker__sex"
          label="性别"
        >
        </el-table-column>
        <el-table-column
          prop="student_basic_info_student_worker__id_card"
          label="身份证号"
        >
        </el-table-column>
        <el-table-column
          prop="student_basic_info_student_worker__mobile"
          label="联系号码"
        >
        </el-table-column>
        <el-table-column
          prop="student_status_educational__administrative_class"
          label="班级"
        >
        </el-table-column>
        <el-table-column
          prop="student_basic_info_student_worker__dormitory_status"
          label="住宿"
        >
        </el-table-column>
        <el-table-column
          prop="student_basic_info_student_worker__grade"
          label="当前所在级"
        >
        </el-table-column>
        <el-table-column
          prop="student_basic_info_student_worker__native_place"
          label="籍贯"
        >
        </el-table-column>
        <el-table-column
          prop="student_basic_info_student_worker__political_outlook"
          label="政治面貌"
        >
        </el-table-column>

        <!-- <el-table-column
          v-for="(item, index) in tableLabel"
          :key="index"
          :prop="item.value"
          :width="item.width"
          :label="item.label"
        /> -->
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >同步记录</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="studentDetail(scope.$index, scope.row)"
              >详细信息</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pageList" style="text-align: right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pagination.num"
        :limit.sync="pagination.size"
        @pagination="selectData"
      />
      <!-- <pagination v-show="total>0" :page.sync="pagination.num" :limit.sync="pagination.size" @pagination="selectData" /> -->
    </div>
    <!-- 备份弹框 -->
    <el-dialog
      :title="'备份'"
      :visible.sync="dataBackups"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="50%"
    >
      <dataBackup
        :backup-data="backupData"
        :comment="comment"
        @cancalDialog="cancalDialog"
      />
    </el-dialog>
    <!-- 备份记录弹框 -->
    <el-dialog
      :title="'备份记录'"
      :visible.sync="dataBackupsList"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="50%"
    >
      <dataBackupsList :data-backups-list="dataBackupsListData" />
    </el-dialog>

    <!-- 导出弹框 -->
    <el-dialog
      :title="'导出'"
      :visible.sync="exportDatas"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="50%"
    >
      <exportData :tableFiled="tableFiled" :comment="comment" />
    </el-dialog>
    <!-- 导出记录弹框 -->
    <el-dialog
      :title="'导出记录'"
      :visible.sync="exportDatasList"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="50%"
    >
      <exportDatasList :export-datas-list="exportDatasListData" />
    </el-dialog>
    <!-- 详情信息弹框 -->
    <el-dialog
      :title="'详细信息:' + tableDatas.student_source__name"
      :visible.sync="dialogTableVisible"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="80%"
    >
      <studentDetail :table-data="tableDatas" />
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import studentDetail from "@/views/studentInfo/studentDetail";
import dataBackup from "@/views/studentInfo/dataBackup";
import dataBackupsList from "@/views/studentInfo/dataBackupsList";
import exportData from "@/views/studentInfo/exportData";
import exportDatasList from "@/views/studentInfo/exportDatasList";
export default {
  name: "studentData",
  components: {
    Pagination,
    studentDetail,
    dataBackup,
    dataBackupsList,
    exportData,
    exportDatasList,
  },
  data() {
    return {
      isLoading: false,
      roleId: "",
      pagination: {
        size: 10,
        num: 0,
      },
      total: 0,
      studentName: "",
      idCard: "",
      queryParams: {},
      options: [],
      allTable: [],
      tableFiled: [],
      columnComment: [],
      grade: [],
      numOfStudents: [],
      tableName: [
        "employee_information",
        "student_source",
        "student_basic_info_student_worker",
        "dormitory_beds",
        "student_status_educational",
        "payment_information",
      ],
      tableNameInit: [
        "student_source",
        "student_status_educational",
        "student_basic_info_student_worker",
        "payment_information",
        "employee_information",
        "dormitory_beds",
      ],
      tableLabel: [],
      tableData: [],
      tableFiledName: [],
      backupData: [],
      comment: [],
      dataExport: [],
      dataBackupsListData: [],
      exportDatasListData: [],
      tableFileds: [],
      dialogTableVisible: false,
      dataBackups: false,
      dataBackupsList: false,
      exportDatas: false,
      exportDatasList: false,
      tableDatas: [],
      dialogFormExportVisible: false, //控制导出弹框显示
      form: {
        pwd: "",
      },
    };
  },
  computed: {
    countAllStudents1() {
      var arr = this.numOfStudents.map((v) => Number(v));
      return arr.reduce((prev, curr) => {
        return prev + curr;
      }, 0);
    },
  },
  created() {
    this.selectAllTableFiled(this.tableNameInit);
    this.roleId = JSON.parse(sessionStorage.getItem("school")).userInfo.roleId;
  },
  mounted() {
    this.countAllStudents();
  },
  methods: {
    handleEdit() {},
    studentDetail(index, studentData) {
      var params1 = {};
      var tableFiled = this.tableFileds;
      params1.pageSize = 10;
      params1.pageNum = 1;
      params1.idCard = studentData.student_source__id_card;
      var params = JSON.stringify(params1);
      this.$post("dataCenter/selectCurrency", {
        params,
        tableFiled,
      }).then((r) => {
        const data = r.data.data[0];
        var birthday = this.getBirthdayFromIdCard(
          data.student_basic_info_student_worker__id_card
        );
        var schoolStatus = this.getSchoolStatus(
          data.student_basic_info_student_worker__status_of_student_status
        );
        this.tableDatas = data;
        console.log("tableDatas,", data);
        this.tableDatas.student_basic_info_student_worker__birthday = birthday;
        this.tableDatas.student_basic_info_student_worker__status_of_student_status =
          schoolStatus;
        this.loading = true;
      });
      this.dialogTableVisible = true;
    },
    getBirthdayFromIdCard: function (idCard) {
      var birthday = "";
      if (idCard) {
        if (idCard !== null && idCard !== "") {
          if (idCard.length === 15) {
            birthday = "19" + idCard.substr(6, 6);
          } else if (idCard.length === 18) {
            birthday = idCard.substr(6, 8);
          }
          birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
        }
      }

      return birthday;
    },
    getSchoolStatus: function (status) {
      var schoolStatus = "";
      if (status == 0) {
        schoolStatus = "在校";
      } else {
        status == 1;
        schoolStatus = "离校";
      }
      return schoolStatus;
    },
    cellClick(row, column, event, cell) {},
    onload(row, column, event, cell) {},
    setColumnStyle(column) {
      if (column.columnIndex % 2 === 0) {
        return "font-size: 10px";
      }
    },
    setRowStyle({ row, rowIndex }) {
      var stylejson = {};
      if (rowIndex % 2 === 0) {
        stylejson.color = "green";
        stylejson.fontSize = "2px";
        return stylejson;
      } else {
        return "";
      }
    },
    reset() {
      this.queryParams = {};
      this.sort = {};
      this.$refs.table.clearSort();
      this.$refs.table.clearFilter();
      this.fetch();
    },
    dataBackup(params1 = {}) {
      var baseName = "febs_cloud_base";
      // var tableName = this.tableName //备份所有字段数据
      var tableName = "student_source"; //备份特定字段数据
      this.tableFiled = [];
      this.columnComment = [];
      this.$get("dataCenter/selectAllTableField", {
        baseName,
        tableName,
      }).then((r) => {
        const data = r.data.data;
        for (var i = 0; i < data.length; i++) {
          this.tableFiled.push(data[i].COLUMN_NAME);
          this.columnComment.push(data[i].column_comment);
        }
        var tableFiled = this.tableFiled;
        var columnComment = this.columnComment;
        var params = JSON.stringify(params1);
        this.$post("dataCenter/selectCurrency", {
          params,
          tableFiled,
        }).then((r) => {
          const data = r.data.data;
          this.backupData = data;
          var str = "";
          for (var i = 0; i < tableFiled.length; i++) {
            tableFiled[i] = JSON.stringify(tableFiled[i]);
            columnComment[i] = JSON.stringify(columnComment[i]);
            str += tableFiled[i] + ":" + columnComment[i] + ",";
          }
          this.comment = str;
        });
      });
      this.dataBackups = true;
    },
    // 备份确定后隐藏弹框
    cancalDialog(isShow) {
      this.dataBackups = false;
    },
    dataBackupList(params1 = {}) {
      var startTime = "";
      var endTime = "";
      var page = 1;
      var limit = 100;
      this.$get("dataCenter/findAllDataBackups", {
        startTime,
        endTime,
        page,
        limit,
      }).then((r) => {
        const data = r.data.data;
        this.dataBackupsListData = data;
      });
      this.dataBackupsList = true;
    },
    selectDataBySelect() {
      this.pagination.size = 10;
      this.pagination.num = 1;
      this.selectData();
    },
    selectData(params1 = {}) {
      this.isLoading = true;
      params1.pageSize = this.pagination.size;
      params1.pageNum = this.pagination.num;
      params1.studentName = this.studentName.trim();
      params1.idCard = this.idCard.trim();
      params1.tableName = this.tableName;
      var tableFiled = [];
      tableFiled = this.tableFileds.join(",");
      var params = JSON.stringify(params1);
      this.$post("dataCenter/selectCurrency", {
        params,
        tableFiled,
      }).then((r) => {
        this.isLoading = false;
        const data = r.data.data;
        for (var i = 0; i < data.length; i++) {
          this.tableFiledName = data[i];
        }
        this.total = r.data.count;
        this.tableFiledName = data;
        this.loading = true;
      });
    },
    fetch(params1 = {}) {
      this.isLoading = true;
      params1.pageSize = this.pagination.size;
      params1.pageNum = this.pagination.num;
      params1.studentName = this.studentName;
      params1.idCard = this.idCard;
      params1.tableName = this.tableName;
      var tableFiled = [];
      tableFiled = this.tableFileds.join(",");
      var params = JSON.stringify(params1);
      this.$post("dataCenter/selectCurrency", {
        params,
        tableFiled,
      }).then((r) => {
        const data = r.data.data;
        for (var i = 0; i < data.length; i++) {
          this.tableFiledName = data[i];
        }
        this.isLoading = false;
        this.total = r.data.count;
        this.tableFiledName = data;
        this.loading = true;
      });
      // if (tableFiled.length === 0) {
      //   this.selectAllTableFiled(this.tableNameInit)
      // } else {

      // }
    },
    selectTableData(tableName) {
      var baseName = "febs_cloud_base";
      this.$get("dataCenter/selectAllTableField", {
        baseName,
        tableName,
      }).then((r) => {
        const data = r.data.data;
        this.tableData = [];
        for (var i = 0; i < data.length; i++) {
          this.tableData.push({
            value: data[i].COLUMN_NAME,
            label: data[i].column_comment,
          });
          this.tableFileds.push(data[i].COLUMN_NAME);
        }
        this.tableLabel = this.tableLabel.filter((item) => {
          return (
            item.label == "姓名" ||
            item.label == "身份证号" ||
            item.label == "入学口:统招，单招，成教" ||
            item.label == "是否在籍" ||
            item.label == "学籍注册号" ||
            item.label == "学院学籍状态" ||
            item.label == "学号" ||
            item.label == "专业" ||
            item.label == "当前所在级" ||
            item.label == "行政班"
          );
        });
        var temp = [],
          obj = {};
        for (let i = 0; i < this.tableLabel.length; i++) {
          if (!obj[this.tableLabel[i].label]) {
            temp.push(this.tableLabel[i]);
            obj[this.tableLabel[i].label] = true;
          }
        }
        temp.map((item) => {
          if (item.label == "身份证号") {
            item.width = 200;
          } else if (item.label == "入学口:统招，单招，成教") {
            item.width = 260;
          } else if (item.label == "学院学籍状态") {
            item.width = 150;
          }
        });
        this.tableLabel = temp;
      });
      this.loading = false;
    },
    selectAllTableFiled(tableName) {
      var baseName = "febs_cloud_base";
      this.tableLabel = [];
      this.tableFiled = [];
      this.$get("dataCenter/selectAllTableField", {
        baseName,
        tableName,
      }).then((r) => {
        const data = r.data.data;
        this.tableData = [];
        for (var i = 0; i < data.length; i++) {
          this.tableData.push({
            value: data[i].COLUMN_NAME,
            label: data[i].column_comment,
          });
          this.tableFileds.push(data[i].COLUMN_NAME);
        }
        this.tableLabel = this.tableData.filter((item) => {
          return (
            item.label == "姓名" ||
            item.label == "身份证号" ||
            item.label == "入学口:统招，单招，成教" ||
            item.label == "是否在籍" ||
            item.label == "学籍注册号" ||
            item.label == "学院学籍状态" ||
            item.label == "学号" ||
            item.label == "专业" ||
            item.label == "当前所在级" ||
            item.label == "行政班"
          );
        });
        var temp = [],
          obj = {};
        for (let i = 0; i < this.tableLabel.length; i++) {
          if (!obj[this.tableLabel[i].label]) {
            temp.push(this.tableLabel[i]);
            obj[this.tableLabel[i].label] = true;
          }
        }
        temp.map((item) => {
          if (item.label == "身份证号") {
            item.width = 200;
          } else if (item.label == "入学口:统招，单招，成教") {
            item.width = 260;
          } else if (item.label == "学院学籍状态") {
            item.width = 150;
          }
        });
        this.tableLabel = temp;
        this.tableLabel.map((item) => {
          item.value = item.value.replace(".", "__");
        });
        this.fetch();
      });
      this.loading = false;
    },
    changeTableFiled(event) {
      this.tableLabel = [];
      this.tableFiled = [];
      for (var i = 0; i < event.length; i++) {
        var COLUMN_NAMES = event[i].value;
        var COLUMN_NAMESS = COLUMN_NAMES.replace(".", "__");
        this.tableLabel.push({ label: event[i].label, prop: COLUMN_NAMESS });
        this.tableFiled.push(event[i].value);
      }
    },
    countAllStudents(params1 = {}) {
      // 获取当前年月日
      var CurrentDate = new Date();
      const date = {
        year: CurrentDate.getFullYear(),
        month: CurrentDate.getMonth() + 1,
        day: CurrentDate.getDate(),
      };
      var currentYear = date.year;
      var currentMonth = date.month;
      var currentDay = date.day;
      if (currentMonth <= 6 && currentDay <= 30) {
        currentYear = currentYear - 1;
      }
      // date转string
      this.grade = [
        currentYear - 3 + "",
        currentYear - 2 + "",
        currentYear - 1 + "",
        currentYear - 0 + "",
      ];
      params1.grade = this.grade;
      var params = JSON.stringify(params1);
      this.$post("dataCenter/countAllStudents", {
        params,
      }).then((r) => {
        this.numOfStudents = r.data.totalList;
      });
    },
    // 导出数据
    exportData(params1 = {}) {
      var baseName = "febs_cloud_base";
      // var tableName = this.tableName //导出所有字段数据
      var tableName = "student_source"; //导出特定字段数据
      this.tableFiled = [];
      this.columnComment = [];
      this.$get("dataCenter/selectAllTableField", {
        baseName,
        tableName,
      }).then((r) => {
        const data = r.data.data;
        for (var i = 0; i < data.length; i++) {
          this.tableFiled.push(data[i].COLUMN_NAME);
          this.columnComment.push(data[i].column_comment);
        }
        var tableFiled = this.tableFiled;
        var paramsFromSD = JSON.stringify(params1);
        var columnComment = this.columnComment;
        var str = "";
        for (var i = 0; i < tableFiled.length; i++) {
          tableFiled[i] = JSON.stringify(tableFiled[i]);
          columnComment[i] = JSON.stringify(columnComment[i]);
          str += tableFiled[i] + ":" + columnComment[i] + ",";
        }
        this.comment = str;
      });
      this.exportDatas = true;
    },
    exportDataList(params1 = {}) {
      var page = 1;
      var limit = 100;
      this.$get("dataCenter/selectExportRecords", {
        page,
        limit,
      }).then((r) => {
        const data = r.data.data;
        this.exportDatasListData = data;
      });
      this.exportDatasList = true;
    },
  },
};
</script>
<style scoped>
.container {
  padding: 10px;
  padding-bottom: 50px;
}

.tableLis .el-table {
  font-size: 14px;
}
.el-form-item {
  margin-bottom: 5px;
  margin-right: 20px;
}
.btnSearch {
  height: 90px;
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  text-align: left;
  background-color: #ffffff;
  padding: 16px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
}
.btnSearch .el-input__inner {
  height: 32px;
  line-height: 32px;
  width: 180px;
}
.el-button {
  padding: 7px 10px;
}
.optionBtns {
  margin-top: 36px;
}
.el-pagination {
  text-align: right;
}
.el-form-item__label {
  line-height: 24px;
  padding: 0;
}
.el-table--scrollable-y .el-table__body-wrapper {
  height: 100% !important;
}
/deep/ .el-form-item__label {
  line-height: 30px;
  padding-bottom: 0;
}

.el-card {
  text-align: left !important;
}
</style>
